<template>
  <div class="main-wrapper">
    <!-- 功能--工具条 -->
    <div class="operation-but-group">
      <el-button size="small" @click="handleDelete">
        删除
      </el-button>
      <el-button size="small" @click="getList">
        刷新
      </el-button>
    </div>
    <div class="pnc-list">
      <el-card class="box-card pnc-item add-card">
        <UploadPnc @refresh="getList"/>
      </el-card>
      <el-card class="box-card pnc-item" v-for="(item,index) in list" :key="index">
        <div slot="header" class="clearfix"> 
          <el-checkbox v-model="item.checked" :disabled="checkDisabledPnc(item.version)"/>
          <span class="item-name">{{item.version}}</span>
        </div>
        <p class="item-desc">名称：{{ item.name }}</p>
        <p class="item-desc">大小：{{ item.size }}</p>
        <p class="item-desc">创建时间：{{ item.created.slice(0,19).replace('T',' ') }}</p>
      </el-card>
    </div>
      <!--弹窗-->
      <DeleteDialog :visible="isVisibleDeleteModal" :content="deleteContentText" @closeDialog="closeDeleteDialog" @submitDelete="submitDelete"/>
  </div>
</template>
<script>
import {getPncList, deletePnc} from '@/api/pnc'
import DeleteDialog from '@/components/DeleteDialog'
import UploadPnc from './components/UploadPnc.vue'
  export default{
    name: 'Pnc',
    components: {UploadPnc, DeleteDialog},
    data(){
      return{
        list: [],
        selectedIds: [],
        disabledPncArr: ['netatm_cyber_default','pnc_cyber_default','amap_cyber_default'],
        isVisibleDeleteModal: false,
        deleteContentText:'确认删除所选的算法版本吗？',
      }
    },
    created(){
      this.getList()
    },
    methods:{
      getList(){
        getPncList().then(res => {
          if(res.versions && res.versions.length >0){
            this.list = res.versions.map((item=>{
              return Object.assign(item,{checked: false})
            }))
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleDelete(){
        let selectedPnc = this.list.filter(item => item.checked)
        this.selectedIds = selectedPnc.map(item => {
          return item.version
        })
        if(this.selectedIds.length < 1) {
          this.$message.warning('请选中需要删除的算法版本')
          return
        }
        this.isVisibleDeleteModal = true
      },
      // 删除弹窗的提交
      submitDelete(){
        deletePnc(this.selectedIds).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.isVisibleDeleteModal = false
          this.getList()
        })
      },
       // 删除弹窗的关闭
       closeDeleteDialog(){
        this.isVisibleDeleteModal = false
        this.list.forEach(item => {
          item.checked = false
        })
      },
      // 特定名称的pnc不允许删除，checkbox disabled
      checkDisabledPnc(version){
        if(this.disabledPncArr.indexOf(version) > -1){
          return true
        }else {
          return false
        }
      }

    }
  }
</script>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.operation-but-group{
    @include operation-button-group;
    padding: 12px 0 6px;
  }
.main-wrapper{
  padding-left: 20px;
  .pnc-title{
    font-size: 22px;
    padding: 20px 0 20px;
  }
  .pnc-list{
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .pnc-item{
      font-family: 'Times New Roman';
      width: 16%;
      margin-right: 0.6%;
      margin-bottom: 30px;
      
      height: 240px;
      @include text-ellipsis;
      ::v-deep .el-card__header{
        padding: 15px 20px !important;
        .el-checkbox{
          vertical-align: super;
        }
      }
      .el-card__body{
        padding: 36px 20px;
      }
      ::v-deep .el-card__header{
        background-color: #B6C5EA;
        .el-checkbox__inner {
          transform: scale(1.2);
        }
      }
      .item-name{
        font-size: 18px;
        font-weight: bold;
        color: #000000a8;
        margin-left: 10px;
        text-transform: uppercase;
        width: calc(100% - 20px);
        display: inline-block;
        @include text-ellipsis;
      }
      .item-desc{
        font-size: 14px;
        line-height: 2.2;
        margin-left: 24px;
        color: #606266;
        @include text-ellipsis;
      }
      
      &:hover{
        box-shadow: 10px 10px 16px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
        // color: #3a8ee6;
      }
    }
  }
}


</style>